<template>
  <div id="notifications">
    <div class="main-container container-limited container-fluid page-holder">
      <div class="page-title-holder">
        <h2 class="page-title">消息中心</h2>
      </div>
      <el-menu mode="horizontal" class="deep-color a-link-item" :default-active="activeType">
        <el-menu-item :index="noteT.comments">
          <router-link :to="initRouterLinkTo(noteT.comments)">
            <span>回复我的</span>
            <el-badge :value="unreadCommentsCount" :max="99" :hidden="unreadCommentsCount === 0"/>
          </router-link>
        </el-menu-item>
        <el-menu-item :index="noteT.votes">
          <router-link :to="initRouterLinkTo(noteT.votes)">
            <span>收到的赞</span>
            <el-badge :value="unreadVotesCount" :max="99" :hidden="unreadVotesCount === 0"/>
          </router-link>
        </el-menu-item>
        <el-menu-item :index="noteT.annc">
          <router-link :to="initRouterLinkTo(noteT.annc)">
            <span>群组公告</span>
            <el-badge :value="unreadAnncCount" :max="99" :hidden="unreadAnncCount === 0"/>
          </router-link>
        </el-menu-item>
        <el-menu-item :index="noteT.other">
          <router-link :to="initRouterLinkTo(noteT.other)">
            <span>系统通知</span>
            <el-badge :value="unreadOtherCount" :max="99" :hidden="unreadOtherCount === 0"/>
          </router-link>
        </el-menu-item>
      </el-menu>
      <NotesListControls v-on:setCurrentPageRead="setCurrentPageRead"/>
      <NotesList :notes="notes[this.activeType]" :is-loading="isLoading[this.activeType]"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import NotesListControls from './NotesListControls';
import NotesList from './NotesList';
import * as format from './format';

export default {
  name: 'Notifications', // 消息提醒页面
  components: { NotesListControls, NotesList },
  data() {
    const noteT = this.$C.notifications.type;
    return {
      noteT, // 默认这一项
      notes: {
        [noteT.comments]: [],
        [noteT.votes]: [],
        [noteT.annc]: [],
        [noteT.other]: [],
      },
      isLoading: {
        [noteT.comments]: false,
        [noteT.votes]: false,
        [noteT.annc]: false,
        [noteT.other]: false,
      },
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    ...mapState([
      'unreadCommentsCount',
      'unreadVotesCount',
      'unreadAnncCount',
      'unreadOtherCount',
    ]),
    // 当前激活
    activeType() { return this.$route.query.type || this.noteT.comments; },
    // 加载消息列表所需参数
    initLoadParams() {
      return {
        type: this.activeType,
        read: this.$route.query.read || 'unread', // 没有时就加载全部
        page: this.$route.query.page || 1,
      };
    },
  },
  methods: {
    // 生成正确链接
    initRouterLinkTo(type) {
      const query = JSON.parse(JSON.stringify(this.$route.query));
      return {
        path: `/${this.$rp.NOTIFICATIONS}`,
        query: Object.assign(query, { type, page: undefined }),
      };
    },
    // 加载消息列表
    loadNotifications() {
      this.isLoading[this.activeType] = true;
      this.notes[this.activeType] = []; // 清空列表
      this.$api.notifications.index(this.initLoadParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading[this.activeType] = false; });
    },
    // 处理返回的信息
    handleRes(res) {
      this.notes[this.activeType] = format.formatNotes(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
    // 设置当前页已读
    setCurrentPageRead() {
      this.isLoading[this.activeType] = true;
      this.$api.notifications.read({
        notesId: this.notes[this.activeType].map(note => note.id),
        read: true,
      }).then(() => {
        this.$root.$emit('updateUnreadCount');
        this.loadNotifications();
      }).catch(() => {});
    },
  },
  created() { this.loadNotifications(); },
  watch: {
    initLoadParams() { this.loadNotifications(); },
  },
};
</script>

<style></style>
